<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
style: {
navigationStyle: 'custom',
navigationBarTitleText: '工作台',
},
}
</route>
<template>
  <view>
<!--    <wd-navbar title="工作台"></wd-navbar>-->


    <wd-swiper :list="swiperList" autoplay v-model:current="current" :indicator="{ type: 'dots-bar' }"
               @click="handleClick" @change="onChange"></wd-swiper>

    <wd-divider>系统管理</wd-divider>
    <wd-grid clickable :column="4">
      <wd-grid-item icon="picture" text="文字" />
      <wd-grid-item icon="picture" text="文字" />
      <wd-grid-item icon="picture" text="文字" />
      <wd-grid-item icon="picture" text="文字" />
      <wd-grid-item icon="picture" text="文字" />
      <wd-grid-item icon="picture" text="文字" />
    </wd-grid>

    <wd-divider>辅助工具</wd-divider>
    <wd-grid clickable :column="4">
      <wd-grid-item icon="picture" text="文字" />
      <wd-grid-item icon="picture" text="文字" />
      <wd-grid-item icon="picture" text="文字" />
      <wd-grid-item icon="picture" text="文字" />
      <wd-grid-item icon="picture" text="文字" />
      <wd-grid-item icon="picture" text="文字" />
    </wd-grid>

    <wd-divider>监控中心</wd-divider>
    <wd-grid clickable :column="4">
      <wd-grid-item icon="picture" text="文字" />
      <wd-grid-item icon="picture" text="文字" />
      <wd-grid-item icon="picture" text="文字" />
      <wd-grid-item icon="picture" text="文字" />
      <wd-grid-item icon="picture" text="文字" />
      <wd-grid-item icon="picture" text="文字" />
    </wd-grid>
  </view>
</template>

<script lang="ts" setup>
const current = ref<number>(0)

const swiperList = ref([
  'https://picsum.photos/400/200?random=1',
  'https://picsum.photos/400/200?random=2',
  'https://picsum.photos/400/200?random=3',
  'https://picsum.photos/400/200?random=4',
  'https://picsum.photos/400/200?random=5'
])
function handleClick(e) {
  console.log(e)
}
function onChange(e) {
  console.log(e)
}



</script>

<style scoped lang="scss">
.wd-swiper{
  --wot-swiper-radius: 0;
}
</style>
